EventEmitter

앵귤러에는 부모로 이벤트를 보내는 방법에 @Output과 EventEmitter가 있다.

• appchild.component.ts

  import { Component, Input, EventEmitter, Output } from '@angular/core';
  @Component({
    selector: 'app-child',
    template: `<button class='btn btn-primary' (click)="handleclick()">Click me</button> `
  })
  export class AppChildComponent {
    handleclick() {
        console.log('hey I am  clicked in child');
    }
  }

  • AppChildComponent에는 handleclick 함수를 호출하는 button이 있다.

• appcomponent.ts

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-root',
    template: `<app-child></app-child>`
  })
  export class AppComponent implements OnInit {
    ngOnInit() {
    }
  }

  • AppComponent안에 AppChildComponent를 사용하고 있다.
  • 만약에 AppChildComponent의 ts 코드 안에서 이벤트를 부모로 넘기고 싶을 때, EventEmitter와 Output을 @angular/core에서 import하면 된다.

• appchildcomponent.ts

  import { Component, EventEmitter, Output } from '@angular/core';
  @Component({
    selector: 'app-child',
    template: `<button class='btn btn-primary' (click)="valueChanged()">Click me</button> `
  })
  export class AppChildComponent {
    @Output() valueChange = new EventEmitter();
    Counter = 0;
    valueChanged() { // You can give any function name
        this.counter = this.counter + 1;
        this.valueChange.emit(this.counter);
    }
  }